import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';

@Component({
  selector: 'change-log',
  template: `
            <h4></h4>
            <ul>
              <li *ngFor="let change of changes">{{ change }}</li>
            </ul>
            `,
})

export class ChangeLogComponent implements OnChanges {
  @Input() contact: any;
  changes: string[] = [];
  ngOnChanges(changes: SimpleChanges): void {
    let log: string[] = [];
    // tslint:disable-next-line:[prefer-const, forin]
    for (let propName in changes) {
      let changedProp = changes[propName];
      let to = JSON.stringify(changedProp.currentValue);
      if (changedProp.isFirstChange()) {
        log.push(`Initial value of ${propName} set to ${to}`);
      } else {
        const from = JSON.stringify(changedProp.previousValue);
        log.push(`${propName} changed from ${from} to ${to}`);
      }
    }
    this.changes.push(log.join(', '));
  }
}

// export class ChangeLogComponent {

//   @Input() contact: any;

//   changes: string[] = [];


  // ngOnChanges(changes: {[propKey: string]: SimpleChanges}): void {
  //   let log: string[] = [];
  //   for (let propName in changes) {
  //     let changedProp = changes[propName],
  //         to = JSON.stringify(changedProp.curValue);
  //     if (changedProp.isFirstChange()) {
  //       log.push(`Initial value of ${propName} set to ${to}`);
  //     } else {
  //       let from = JSON.stringify(changedProp.previousValue);
  //       log.push(`${propName} changed from ${from} to ${to}`);
  //     }
  //   }
  //   this.changes.push(log.join(', '));
  // }
// }
